<template>
  <div>
    <!-- 模糊查询  -->
    <div class="formTop">
      <el-form
        :model="searchParams"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        inline
      >
        <el-form-item label="学生学号" prop="sid">
          <el-input
            v-model="searchParams.sid"
            style="width: 130px"
            suffix-icon="el-icon-coin"
          ></el-input>
        </el-form-item>
        <el-form-item label="学生姓名" prop="sname">
          <el-input
            v-model="searchParams.sname"
            style="width: 130px"
            suffix-icon="el-icon-user-solid"
          ></el-input>
        </el-form-item>
        <el-form-item label="学生班级" prop="sclass">
          <el-select
            v-model="searchParams.sclass"
            style="width: 180px"
            suffix-icon="el-icon-star-on"
            placeholder="请选择学生所在班级"
          >
            <el-option label="23大数据1班" value="23大数据1班"></el-option>
            <el-option
              label="23大数据工程师班"
              value="23大数据工程师班"
            ></el-option>
            <el-option label="23信息安全2班" value="23信息安全2班"></el-option>
            <el-option label="23JAVA工坊班" value="23JAVA工坊班"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学生学院" prop="sdepart">
          <el-select
            v-model="searchParams.sdepart"
            style="width: 180px"
            suffix-icon="el-icon-s-home"
            placeholder="请选择学生所在学院"
          >
            <el-option label="外语旅游学院" value="外语旅游学院"></el-option>
            <el-option label="会计学院" value="会计学院"></el-option>
            <el-option label="鲲鹏产业学院" value="鲲鹏产业学院"></el-option>
            <el-option label="人工智能学院" value="人工智能学院"></el-option>
            <el-option label="舞蹈学院" value="舞蹈学院"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search()"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div>
      <!-- 添加学生信息的按钮 -->
      <el-button type="success" @click="showAddDialog">添加学生信息</el-button>
      <!-- 批量删除的按钮 -->
      <el-button
        type="danger"
        plain
        @click="handleBatchDelete"
        style="margin-left: 20px; width: 120px"
        >批量删除</el-button
      >
    </div>
    <div>
      <el-table
        ref="multipleTable"
        :data="stulist"
        tooltip-effect="dark"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="sid" label="学号" width="70"> </el-table-column>
        <el-table-column label="头像" width="100" align="center">
          <template slot-scope="scope">
            <img
              :src="baseUrl + '/' + scope.row.savator"
              style="width: 50px; height: 50px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="sname" label="姓名" width="100">
        </el-table-column>
        <el-table-column
          prop="sage"
          label="年龄"
          width="80"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="60"> </el-table-column>
        <el-table-column prop="sdepart" label="学院" width="120">
        </el-table-column>
        <el-table-column prop="sclass" label="班级" width="120">
        </el-table-column>
        <el-table-column prop="savator" label="操作" width="150">
          <template slot-scope="scope">
            <!-- 编辑按钮 -->
            <el-button
              class="el-icon-edit"
              size="mini"
              type="warning"
              @click="openModal(scope.row)"
            ></el-button>
            <!-- 删除按钮    -->
            <el-button
              class="el-icon-delete"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 新编辑 -->
      <div>
        <el-dialog
          title="更新学生信息"
          :visible.sync="isModalOpen"
          width="40%"
          @close="closeModal"
        >
          <el-form
            :model="form"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            v-if="isModalOpen"
          >
            <el-form-item label="头像">
              <el-upload
                class="avatar-uploader"
                :action="$baseUrl + '/upload'"
                :show-file-list="false"
                :on-success="handleAvatarSuccess1"
                :before-upload="beforeAvatarUpload1"
              >
                <!-- imageUrl也需要改变 -->
                <img
                  v-if="form.savator"
                  :src="$baseUrl + '/' + form.savator"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="姓名" prop="sname">
              <el-input v-model="form.sname" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="sage">
              <el-input v-model="form.sage" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="学院">
              <el-select
                v-model="form.sdepart"
                placeholder="请选择学生所在学院"
              >
                <el-option
                  label="外语旅游学院"
                  value="外语旅游学院"
                ></el-option>
                <el-option label="会计学院" value="会计学院"></el-option>
                <el-option
                  label="鲲鹏产业学院"
                  value="鲲鹏产业学院"
                ></el-option>
                <el-option
                  label="人工智能学院"
                  value="人工智能学院"
                ></el-option>
                <el-option label="舞蹈学院" value="舞蹈学院"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="班级">
              <el-select v-model="form.sclass" placeholder="请选择学生所在班级">
                <el-option label="23大数据1班" value="23大数据1班"></el-option>
                <el-option
                  label="23大数据工程师班"
                  value="23大数据工程师班"
                ></el-option>
                <el-option
                  label="23信息安全2班"
                  value="23信息安全2班"
                ></el-option>
                <el-option
                  label="23JAVA工坊班"
                  value="23JAVA工坊班"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="form.sex" placeholder="请选择学生性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="certainModal">提交</el-button>
              <el-button @click="closeModal">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>

      <!-- 添加学生信息对话框 -->
      <el-dialog title="添加学生信息" :visible.sync="addDialogVisible">
        <el-form :model="student">
          <!-- 头像上传 -->
          <el-form-item label="头像">
            <el-upload
              class="avatar-uploader"
              :action="$baseUrl + '/upload'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="student.savator"
                :src="baseUrl + student.savator"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <el-form-item label="姓名">
            <el-input v-model="student.sname" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="学号">
            <el-input v-model="student.sid" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="student.sage" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select
              v-model="student.sex"
              clearable
              placeholder="请选择"
              style="width: 200px"
            >
              <el-option
                v-for="item in options"
                :key="item.label"
                :label="item.label"
                :value="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学院">
            <el-select
              v-model="student.sdepart"
              clearable
              placeholder="请选择"
              style="width: 200px"
            >
              <el-option
                v-for="item in optionsX"
                :key="item.label"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级">
            <el-select
              v-model="student.sclass"
              clearable
              placeholder="请选择"
              style="width: 200px"
            >
              <el-option
                v-for="item in optionsC"
                :key="item.label"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getStudents,
  updateStudents,
  findStudentsById,
  deleteStudents,
  addStudents,
  deleteStudentsByIds,
  findStudentsByIds,
} from "@/api/student";
export default {
  name: "student",
  data() {
    return {
      stulist: [],
      searchParams: {
        sid: "",
        sname: "",
        sage: "",
        sdepart: "",
        sclass: "",
      },
      collegeOptions: [
        {
          value: "选项1",
          label: "人工智能学院",
        },
        {
          value: "选项2",
          label: "外语旅游学院",
        },
        {
          value: "选项3",
          label: "鲲鹏产业学院",
        },
        {
          value: "选项4",
          label: "会计学院",
        },
        {
          value: "选项5",
          label: "舞蹈学院",
        },
      ],
      classOptions: [
        {
          value: "选项1",
          label: "23大数据1班",
        },
        {
          value: "选项2",
          label: "23信息安全2班",
        },
        {
          value: "选项3",
          label: "23大数据工程师班",
        },
        {
          value: "选项4",
          label: "23JAVA工坊班",
        },
      ],
      //班级选项
      optionsC: [
        {
          value: "选项1",
          label: "23大数据1班",
        },
        {
          value: "选项2",
          label: "23信息安全2班",
        },
        {
          value: "选项3",
          label: "23大数据工程师班",
        },
        {
          value: "选项4",
          label: "23JAVA工坊班",
        },
      ],
      //学院选项
      optionsX: [
        {
          value: "选项1",
          label: "人工智能学院",
        },
        {
          value: "选项2",
          label: "外语旅游学院",
        },
        {
          value: "选项3",
          label: "鲲鹏产业学院",
        },
        {
          value: "选项4",
          label: "会计学院",
        },
        {
          value: "选项5",
          label: "舞蹈学院",
        },
      ],
      //性别选项
      options: [
        {
          value: "选项1",
          label: "男",
        },
        {
          value: "选项2",
          label: "女",
        },
      ],
      value: "",

      radio: "1",
      imageUrl: "", //头像上传
      student: {
        sname: "",
        sage: "",
        sid: "",
        sdepart: "",
        sclass: "",
        savator: "",
      },
      baseUrl: this.$baseUrl,
      stulist: [], //模型，学生信息列表
      isModalOpen: false,
      outerVisible: false, //控制编辑对话框的显示
      dialogTitle: "编辑学生信息", //对话框的标题
      form: {
        //编辑表单数据
        sname: "",
        sage: "",
        sex: "",
        sdepart: "",
        sclass: "",
        savator: "",
      },
      addDialogVisible: false, // 控制添加学生信息对话框的显示
      multipleSelection: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    //表格颜色的方法
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "warning-row";
      } else if (rowIndex % 2 === 1) {
        return "success-row";
      }
      return "";
    },
    // 头像上传
    handleAvatarSuccess(res, file) {
      //上传成功之后的回调函数
      // this.imageUrl = URL.createObjectURL(file.raw);
      this.student.savator = res.data;
      console.log(this.student.savator);
    },
    beforeAvatarUpload(file) {
      //限制文件类型及大小
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleAvatarSuccess1(res, file) {
      //上传成功之后的回调函数
      // this.imageUrl = URL.createObjectURL(file.raw);
      this.form.savator = res.data;
      console.log(this.form.savator);
    },
    beforeAvatarUpload1(file) {
      //限制文件类型及大小
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    getData() {
      //获取学生列表数据
      getStudents().then((res) => {
        this.stulist = res.data; //当前页数据
        console.log(this.stulist);
      });
    },

    //模糊查询
    search() {
      findStudentsByIds(this.searchParams).then((res) => {
        this.stulist = res.data;
      });
    },

    ///编辑
    // 打开弹框
    openModal(row) {
      this.isModalOpen = true;
      console.log(row);
      //通过学号查找学生信息
      findStudentsById(row.sid).then((res) => {
        this.form = res.data;
        console.log(this.sid);
      });
    },
    certainModal() {
      updateStudents(this.form).then((res) => {
        this.getData();
      });
      this.isModalOpen = false;
    },
    closeModal() {
      this.isModalOpen = false;
    },
    //删除学生列表
    handleDelete(index, row) {
      console.log(index, row);
      const sid = row.sid; // 获取学生ID
      deleteStudents(sid).then((response) => {
        console.log("删除成功:", response.data);

        this.$confirm("确定删除该学生吗？", "提示", {
          type: "warning",
        })
          .then(() => {
            this.$message.success("删除成功"); // 提示用户删除成功
            this.getData(); // 刷新学生列表
          })
          .catch((error) => {
            console.error("删除失败:", error);
            this.$message.error("删除失败"); // 提示用户删除失败
          });
      });
    },

    //批量删除学生列表
    handleBatchDelete() {
      const sid = this.multipleSelection.map((item) => item.sid);
      if (this.multipleSelection.length === 0) {
        this.$message.warning("请选择要删除的学生");
        return;
      }
      console.log("选中的学生ID：", sid); //调试信息
      this.$confirm("确定删除选中的学生吗？", "提示", {
        type: "warning",
      }).then(() => {
        deleteStudentsByIds(sid)
          .then(() => {
            this.$message.success("批量删除成功");
            this.getData(); // 刷新数据
          })
          .catch((error) => {
            console.error("批量删除失败:", error); // 调试信息
            this.$message.error("批量删除失败");
          });
      });
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 显示添加学生信息对话框
    showAddDialog() {
      this.addDialogVisible = true;
    },
    // 添加学生信息
    submitForm() {
      addStudents(this.student)
        .then((res) => {
          this.$message.success("添加成功"); // 提示用户添加成功
          this.getData();
        })
        .catch((error) => {
          console.error("添加失败:", error);
          this.$message.error("添加失败"); // 提示用户添加失败
        });
      this.addDialogVisible = false;
    },
  },
};
</script>

<style>
.Cha {
  width: 340px;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  width: 400px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input {
  width: 100%;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  margin-right: 10px;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  opacity: 0.9;
}

/* 头像上传的样式 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/* 表格颜色 */
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>